<template>

  <el-button type="success" @click="openAdd"> 发布</el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column  prop="name" label="栏目名称" width="150" />
    <el-table-column prop="type" label="栏目类型" width="120" />
    <el-table-column prop="nickname" label="栏目别名" width="120" />
    <el-table-column prop="createTime" label="创建时间" width="120" />
    <el-table-column prop="ms" label="栏目描述" width="120" />
    <el-table-column prop="updateTime" label="更新时间" width="120" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template v-slot="s">
        <el-button link type="primary" size="small" @click="openPublish(s.row.id)">定时发布</el-button>
      </template>
    </el-table-column>
  </el-table>



  <el-dialog v-model="dialogFormVisible" title="发布栏目" width="500">
    <el-form :model="form">
      <el-form-item label="栏目名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="栏目别名" :label-width="formLabelWidth">
        <el-input v-model="form.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="栏目路径" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off" />
      </el-form-item>
      <el-form-item label="栏目类型" :label-width="formLabelWidth">
        <el-select v-model="form.typeId" placeholder="Please select">
          <el-option v-for="type in types" :label="type.type" :value="type.id" />

        </el-select>
      </el-form-item>

      <el-form-item label="栏目描述" :label-width="formLabelWidth">
        <div style="border: 1px solid #ccc">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height: 100px; overflow-y: hidden;"
              v-model="form.ms"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
          />
        </div>
      </el-form-item>
      <el-form-item label="是否静态" :label-width="formLabelWidth">
        <el-switch v-model="form.isStatic" active-value="是"></el-switch>
      </el-form-item>

      <el-form-item  :label-width="formLabelWidth">
        <el-upload
            v-model:file-list="fileList"
            action="/api/file/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="onsuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="add">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible2" title="定时发布栏目" width="500">

    <div class="example-basic">
      <el-time-picker
          v-model="publishForm.publishTime"
          :disabled-hours="disabledHours"
          :disabled-minutes="disabledMinutes"
          :disabled-seconds="disabledSeconds"
          placeholder="请选择"
          value-format="YYYY-MM-DD HH:mm:ss"
      />

    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">Cancel</el-button>
        <el-button type="primary" @click="publish()">确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {reactive, inject, ref, onMounted} from 'vue'
import {ElMessage, UploadProps} from 'element-plus'
import {addService, listChannelService, listTypeService, taskPublishService, taskService} from "@/api/channel";
import { Plus } from '@element-plus/icons-vue'
const tableData = ref([])
const dialogFormVisible = ref(false)

const formLabelWidth = '75px'
let types= ref([])
const fileList = ref([])
const dialogFormVisible2 = ref(false)

//打开定时发布对话框
let publishForm =reactive({
  id:'',//栏目id
  publishTime:''//发布时间
});
const openPublish=(id)=>{
  publishForm.id=id;
  dialogFormVisible2.value=true
}

const  publish=()=>{
  taskPublishService(publishForm).then(res=>{
    if(res.code==200){
      ElMessage.success(res.msg);
    }
  })
}

const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
const disabledHours = () => {
  return makeRange(0, 1)
}
const disabledMinutes = (hour: number) => {
  if (hour === 17) {
    return makeRange(0, 29)
  }
  if (hour === 18) {
    return makeRange(31, 59)
  }
}
const disabledSeconds = (hour: number, minute: number) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
}



const form = reactive({
  name:'',
  nickname:'',
  url:'',
  typeId:'',
  ms:'',
  isStatic:'是',
  channelImagesList:[]

})

const add =()=>{
  addService(form).then(res=>{
    if(res.code ==200){
      ElMessage.success(res.msg);
      list();
      dialogFormVisible.value= false;
    }else{
      ElMessage.error(res.msg);
    }
  })
}
 const  list= ()=>{
   listChannelService().then(res=>{
     tableData.value=res.data;
   })
 }
//上传
 const onsuccess= (res)=>{
     form.channelImagesList.push({url:res.data})
 }

 const  listType=()=>{
   listTypeService().then(res=>{
     types =res.data;
   })
 }


 //打开发布对话厈
const openAdd = ()=>{
   dialogFormVisible.value=true;
}

onMounted(()=>{
  list();
  listType();
})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    form.channelImagesList=[];
 // console.log(uploadFiles)
  uploadFiles.forEach(resp=>{
    form.channelImagesList.push({url:resp.response.data})
  //  console.log(resp)
  //  console.log(resp.response)
   // console.log(resp.response.data)
  })
//  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}






import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const mode =ref('default') // 或 'simple'

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('<p>hello</p>')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
      }, 1500)
    })

    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...' }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }


</script>

<style>
.example-basic .el-date-editor {
  margin: 8px;
}
</style>